<template>
    <div class="containbox">
        <!-- 头部 -->
        <mt-header title="鲜花分类">
            <router-link to="/index" class="mui-icon mui-icon-arrowleft" slot="left">
            </router-link>
            <a class="mui-icon mui-icon-bars" slot="right" @click="isShow=!isShow"></a>
        </mt-header>
        <!-- 右侧more按钮的列表 -->
        <sort v-if="isShow"></sort>
        <!-- 导航栏 -->
        <mt-navbar class="nav_first" v-model="selected">
            <mt-tab-item id="1">综合</mt-tab-item>
            <mt-tab-item id="2">销量 <span class="mui-icon mui-icon-arrowdown"></span></mt-tab-item>
            <mt-tab-item id="3">价格 <span class="mui-icon mui-icon-arrowdown"></span></mt-tab-item>
            <mt-tab-item id="4" href="/#/sort">鲜花分类 <span class="mui-icon mui-icon-arrowright"></span></mt-tab-item>
        </mt-navbar>
        <mt-navbar v-model="selectSecond">
            <mt-tab-item id="1">全部</mt-tab-item>
            <mt-tab-item id="2">爱情鲜花</mt-tab-item>
            <mt-tab-item id="3">友情鲜花</mt-tab-item>
            <mt-tab-item id="4">送长辈鲜花</mt-tab-item>
            <mt-tab-item id="5">商务鲜花</mt-tab-item>
        </mt-navbar>
        <!-- 商品列表 -->
        <div class="goods">
            <div class="mui-content" style="background-color:#fff" v-if="selected==1">   
                <transition-group appear tag="ul" 
                    class="mui-table-view mui-grid-view"
                    v-infinite-scroll="loadMore"
                    infinite-scroll-disabled="loading"
                    infinite-scroll-distance="10">
                    <li v-for="(item, i) in goodsList" :key="i" class="mui-table-view-cell mui-media mui-col-xs-6">
                        <a href="/#/commodity">
                            <img class="mui-media-object" :src="item.img">
                            <div class="mui-media-body">
                                <p class="goods-title">{{item.title}}</p>
                                <p class="goods-detail">{{item.detail}}</p>
                                <p class="goods-price">{{item.price}}</p>
                            </div>
                        </a>
                    </li>
                </transition-group>
            </div>
            <!-- 销量降序 -->
            <div class="mui-content" style="background-color:#fff" v-show="selected==2">   
                <transition-group appear tag="ul" class="mui-table-view mui-grid-view">
                    <li v-for="(item) in numDown" :key="item.goodsId" class="mui-table-view-cell mui-media mui-col-xs-6">
                        <a href="/#/commodity">
                            <img class="mui-media-object" :src="item.img">
                            <div class="mui-media-body">
                                <p class="goods-title">{{item.title}}</p>
                                <p class="goods-detail">{{item.detail}}</p>
                                <p class="goods-price">{{item.price}}</p>
                            </div>
                        </a>
                    </li>
                </transition-group>
            </div>
            <!-- 价格降序 -->
            <div class="mui-content" style="background-color:#fff" v-show="selected==3">   
                <transition-group appear tag="ul" class="mui-table-view mui-grid-view">
                    <li v-for="(item) in priceDown" :key="item.goodsId" class="mui-table-view-cell mui-media mui-col-xs-6">
                        <a href="/#/commodity">
                            <img class="mui-media-object" :src="item.img">
                            <div class="mui-media-body">
                                <p class="goods-title">{{item.title}}</p>
                                <p class="goods-detail">{{item.detail}}</p>
                                <p class="goods-price">{{item.price}}</p>
                            </div>
                        </a>
                    </li>
                </transition-group>
            </div>
            
        </div>


    </div>
</template>
<script>
import Vue from "vue";
// 导入tab栏切换,滚动加载
import { Navbar, TabItem, InfiniteScroll, Indicator } from "mint-ui";
Vue.component(Navbar.name, Navbar);
Vue.component(TabItem.name, TabItem);
Vue.use(InfiniteScroll);
// 导入底部导航栏组件
import sort from "./navsort.vue";
import goodsData from "./data/catelist.json";
import priceDownData from "./data/priceDown.json";
import numDownData from "./data/numDown.json";
export default {
  data() {
    return {
      selected: "1",
      selectSecond: "1",
      isShow: false,
      goodsList: goodsData,
      priceDown: priceDownData,
      numDown: numDownData,
    };
  },
  methods: {
      loadMore() {
        Indicator.open({
            text: '加载中...'
        });
        setTimeout(() => {
            let last = this.goodsList[this.goodsList.length - 1];
            for (let i = 1; i <= 6; i++) {
            this.goodsList.push(last);
            }
            Indicator.close();
        }, 1000);
    }
  },
  components: {
    sort
  }
};
</script>
<style lang="less" scoped>
// 头部
.mint-header {
  height: 44px;
  color: #666;
  background-color: rgba(250, 250, 250, 0.9);
  border-bottom: 1px solid #e4e4e4;
}
// 导航栏
.mint-navbar {
  height: 44px;
  border-bottom: 1px solid #e4e4e4;
  .mint-tab-item {
    color: #666;
    &.is-selected {
      color: #333;
      border-bottom: 0;
      margin-bottom: 0;
      font-weight: bold;
    }
    span {
      font-size: 12px;
    }
  }
}
.nav_first {
  a:nth-of-type(-n + 3) {
    border-right: 1px solid #e4e4e4;
  }
  .mint-tab-item.is-selected {
    border-bottom: 2px solid #f60;
    color: #f60;
    margin-bottom: -2px;
  }
}

// 商品列表
.mui-content > .mui-table-view {
  &:first-child {
    margin-top: 0;
  }
  &.mui-grid-view {
    .mui-table-view-cell {
      padding: 0;
      > a:not(.mui-btn) {
        margin: 10px 0 0 14px;
        border: 1px solid #ccc;
        padding: 5px;
      }
      .mui-media-body {
        height: auto;
        p {
          font-size: 12px;
          color: #232323;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          text-align: left;
          &.goods-detail {
            color: #777;
          }
        }
      }
    }
  }
}
</style>